import * as React from 'react'
import Slider from 'react-slick'
import { getClassName } from '../utils'

interface IProps {
    className?: string
    columnNum?: number
    data: any[]
    infinite?: boolean
    dots?: boolean
    rowNum?: number
    isCarousel?: boolean
    renderItem?: (item: any, index: number | string) => JSX.Element
}

export default class Grid extends React.PureComponent<IProps, any> {

    public static defaultProps: IProps = {
        columnNum: 4,
        data: [],
        infinite: false,
        rowNum: 2,
        isCarousel: false,
        dots: false
    }

    public render(): JSX.Element {
        const { isCarousel } = this.props
        return (
            isCarousel ? this.getCarouselNode() : this.getDefaultNode()
        )
    }

    private getDefaultNode = () => {
        const { className, data, columnNum, renderItem } = this.props
        return (
            <div className={getClassName('grid', className)}>
                <div className={getClassName('grid_item')}>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div className={getClassName('grid_item_view')} style={{ width: `${100 / (columnNum || 4)}%` }} key={index} >
                                    {
                                        renderItem ? renderItem(item, index) : (
                                            <React.Fragment>
                                                <img className={getClassName('grid_item_view__img')} src={item.icon} />
                                                <div className={getClassName('grid_item_view__label')}>{item.label}</div>
                                            </React.Fragment>
                                        )
                                    }
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }

    private getCarouselNode = () => {
        const { className, renderItem, columnNum, infinite, dots } = this.props
        const data = this.initData()
        const setting = {
            dots,
            focusOnSelect: true,
            speed: 500,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite
        }
        if (!data.length) {
            return <div className={getClassName('grid', className)} />
        }
        return (
            <div className={getClassName('grid', className)}>
                <Slider {...setting}>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div className={getClassName('grid_item')} key={index}>

                                    {
                                        item.children.map((i: any, k: number) => {
                                            return (
                                                (
                                                    <div className={getClassName('grid_item_view')} style={{ width: `${100 / (columnNum || 4)}%` }} key={`${index}-${k}`} >
                                                        {renderItem ? renderItem(i, `${index}-${k}`) : (
                                                            <React.Fragment>
                                                                <img className={getClassName('grid_item_view__img')} src={item.icon} />
                                                                <div className={getClassName('grid_item_view__label')}>{item.label}</div>
                                                            </React.Fragment>
                                                        )}
                                                    </div>
                                                )
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }
                </Slider>
            </div >
        )
    }

    private initData = () => {
        const { data, columnNum, rowNum } = this.props
        const column = columnNum || 4
        const row = rowNum || 2
        const value: any[] = []
        let num: number = -1
        data.map((item: any, index: number) => {
            if (index % (column * row) === 0) {
                value.push({
                    data: item,
                    children: []
                })
            }
            if (index % (column * row) === 0) {
                num++
            }
            value[num].children.push(item)
        })
        return value
    }

}